import "./BookInfo.scss";
import {ReactComponent} from "../../class/ReactComponent";
import React, {CSSProperties} from "react";
import {TableBookList} from "../../../common/class/TableBookList";
import {showTime} from "../../../common/function/dateFunc";
import {updateFrequencyMap} from "../../var/constant";

export namespace BookInfo {
    export interface Props extends ReactComponent.Props {
        baseData: Partial<TableBookList.Data>;
    }
}

export class BookInfo extends ReactComponent<BookInfo.Props> {
    public render() {
        const baseData = this.props.baseData;
        return (
            <div className={this.getClsName("book-info-component")}>
                <div className="book-cover" style={this.getCoverStyle()}></div>
                <div className="book-base-info">
                    <div className="info-row name">
                        <div className="info-label">书名</div>
                        <div className="info-value">{ baseData.name || "" }</div>
                    </div>
                    <div className="info-row author">
                        <div className="info-label">作者</div>
                        <div className="info-value">{ baseData.author || "" }</div>
                    </div>
                    <div className="info-row update-time">
                        <div className="info-label">更新时间</div>
                        <div className="info-value">
                            <span className="last-update-time">{ showTime(baseData.last_update_time) || "" }</span>
                            <span className="sep">|</span>
                            <span
                                className="update-frequency"
                            >{this.getSinoFrequencyOf(baseData.update_frequency)}</span>
                        </div>
                    </div>
                    {this.listChildren()}
                </div>
            </div>
        );
    }
    protected listChildren() {
        if (this.props.children) {
            return this.props.children;
        }
        return "";
    }
    protected getSinoFrequencyOf(eng: string): string {
        if (updateFrequencyMap.hasOwnProperty(eng)) {
            return (updateFrequencyMap as any)[eng] + "更";
        }
        return  "";
    }
    protected getCoverStyle() {
        const style: CSSProperties = {};
        if (this.props.baseData.cover) {
            style.backgroundImage = `url("${this.props.baseData.cover}")`;
        }
        return style;
    }
}
